<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="nav" content="1" />
<meta name="acc" content="2-2" />
<title>我的计划</title>
<link rel='stylesheet' type='text/css'
	href='${ctx}/scripts/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css'
	href='${ctx}/scripts/fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript'
	src='${ctx}/scripts/fullcalendar/fullcalendar.js'></script>
<script type='text/javascript'
	src='${ctx}/scripts/fullcalendar/jquery.qtip.js'></script>
<link rel='stylesheet' type='text/css'
	href='${ctx}/scripts/fullcalendar/jquery.qtip.css' />
<script type='text/javascript'>

$(document).ready(function() {
        $('#calendar').fullCalendar({
            height: 550,
        	header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
           
            editable: true,
            
            draggable: true,
            
            events:"${ctx}/app/plan!viewJson.action",
            
            eventRender:function(event, element, view ){ 
               	 $(element).qtip({       
              		content: {
              			 text:
              			 '<p><b>'+$.fullCalendar.formatDate(event.start,"MM月 dd日 HH:mm")+"—"+$.fullCalendar.formatDate(event.end,"MM月 dd日 HH:mm")+'</b></p>'+
              			 '<p>'+event.title+'</p>'+
              			 '<p align="right"><a href='+event.url+'>'+"更多信息"+'</a></p>',
              			 title: {
                               text: '我的计划日程',
                               button: true
                            }
              			},
              			position: {
              	            at: 'bottom center', // Position the tooltip above the link
              	         	my: 'top center',
              	            viewport: $(window) // Keep the tooltip on-screen at all times
              	         },
              	        show: {
              	            event: 'click',
              	            solo: true // Only show one tooltip at a time
              	         },
              	        hide: 'unfocus'
             	 });
            	}, 
            	eventClick: function(event) {//单击事件
                    if (event.url) {
                        return false;
                    }
                },
                eventDblClick:function(event){//双击事件
                	if (event.url) {
                		window.location.href = event.url;
                    }
                }
        });
    });
</script>
<style type='text/css'>
#calendar {
	width: 100%;
	margin: 0px, 0px, 0px, 0px;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>